<template>
  <backContainer>
    <card
      v-loading="loading"
      :width="1400"
      class="box"
      style="margin: 24px auto 0 auto"
    >
      <SplitPane
        split="vertical"
        :default-percent="20"
        :min-percent="20"
        :max-percent="40"
      >
        <template #left>
          <div class="left-content">
            <div class="left-Title">学科专业组</div>
            <div class="left-navs" v-if="disciplineGroupList.length > 0">
              <div
                @click="disciplineGroupClick(item)"
                v-for="(item, index) in disciplineGroupList"
                :key="index"
              >
                <tooltip
                  :class="[
                    item.disciplineGroupId == activeDisciplineGroupId
                      ? 'left-navs-item-active'
                      : '',
                    'left-navs-item',
                  ]"
                  width="100%"
                  :text="item.disciplineGroupName"
                >
                </tooltip>
              </div>
            </div>
            <div
              style="width: 100%; height: 100%"
              v-if="disciplineGroupList.length == 0"
              class="flexCen flexColCenter"
            >
              <el-empty description="暂无学科专业组~"></el-empty>
            </div>
          </div>
        </template>

        <template #right>
          <div
            class="right-content"
            style="margin-left: -5px"
            v-if="disciplineGroupList.length > 0"
          >
            <div class="commonMenu">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
              >
                <el-menu-item index="1" :disabled="sorting">
                  课程
                </el-menu-item>
                <el-menu-item index="2" :disabled="sorting"> 资料</el-menu-item>
                <el-menu-item index="3" :disabled="sorting"> 成员</el-menu-item>
              </el-menu>
            </div>
            <div>
              <disciplineGroupCourse
                @loading="
                  (e) => {
                    loading = e;
                  }
                "
                @updateSorting="getSorting"
                :isLeader="isLeader"
                :disciplineGroupId="activeDisciplineGroupId"
                :activeIndex="activeIndex"
                v-if="activeIndex == '1'"
              ></disciplineGroupCourse>
              <disciplineGroupFile
                @loading="
                  (e) => {
                    loading = e;
                  }
                "
                :isLeader="isLeader"
                @updateSorting="getSorting"
                :activeIndex="activeIndex"
                :disciplineGroupId="activeDisciplineGroupId"
                v-if="activeIndex == '2'"
              ></disciplineGroupFile>
              <disciplineGroupUser
                @loading="
                  (e) => {
                    loading = e;
                  }
                "
                :activeIndex="activeIndex"
                :disciplineGroupId="activeDisciplineGroupId"
                v-if="activeIndex == '3'"
              ></disciplineGroupUser>
            </div>
          </div>
          <div
            style="width: 100%; height: 100%"
            v-if="disciplineGroupList.length == 0"
            class="flexCen flexColCenter"
          >
            <el-empty description="暂无学科专业组~"></el-empty>
          </div>
        </template>
      </SplitPane>
    </card>
  </backContainer>
</template>

<script>
import SplitPane from './components/split.vue'

import disciplineGroupCourse from './components/disciplineGroupCourse.vue'
import disciplineGroupFile from './components/disciplineGroupFile.vue'
import disciplineGroupUser from './components/disciplineGroupUser.vue'
import {
  disciplineList,
} from '@/api/disciplineGroup/disciplineGroup'
export default {
  components: {
    SplitPane,
    disciplineGroupCourse,
    disciplineGroupFile,
    disciplineGroupUser
  },
  data() {
    return {
      sorting: false,
      queryParams: {
        courseName: '',
        semesterId: ''
      },
      loading: false,

      activeIndex: '1',
      activeDisciplineGroupId: '',
      disciplineGroupList: [],
      isLeader: false
    }
  },
  async mounted() {
    await this.getDisciplineGroupList()
  },
  methods: {
    getSorting(e) {
      this.sorting = e
      this.$forceUpdate()
    },
    async disciplineGroupClick(item) {
      if (this.sorting) {
        // 请先完成排序
        this.$message({
          message: '请先完成排序',
          type: 'warning'
        })
        return false
      }

      this.isLeader =
        item.leaderId + '' == this.$store.getters.teacherId + ''
      this.activeDisciplineGroupId = item.disciplineGroupId
    },
    // 获取学科专业组列表
    async getDisciplineGroupList() {
      try {
        this.loading = true
        let res = await disciplineList({
          schoolId: this.$store.getters.schoolId,
          // branchId: this.$store.getters.branchId,
          teacherId: this.$store.getters.teacherId
        })
        if (res.code == 200) {
          this.disciplineGroupList = res.data

          if (this.disciplineGroupList.length > 0) {
            this.activeDisciplineGroupId =
              this.disciplineGroupList[0].disciplineGroupId
            this.isLeader =
              this.disciplineGroupList[0].leaderId + '' ==
              this.$store.getters.teacherId + ''
          }
        }
      } finally {
        this.loading = false
      }
    },

    handleSelect(key) {
      this.activeIndex = key
    }
  }
}
</script>

<style scoped lang="scss">
// ::v-deep.splitter-pane.vertical {
//   right: 5px !important;
// }
::v-deep.commonMenu {
  padding: 30px 0 0 0;
}

::v-deep .splitter-pane-resizer {
  background: #edeff0 !important;
}

::v-deep .splitter-pane-resizer.vertical {
  width: 0 !important;
  border-left: 1px solid hsla(0, 0%, 100%, 0);
  border-right: 1px solid hsla(0, 0%, 100%, 0);
}

.split-pane-page-wrapper {
  width: 100%;
  height: calc(-116px + 100vh);
}

::v-deep .el-menu--horizontal > .el-menu-item:hover {
  color: #11a983 !important;
  border-bottom: 1px solid #e6e6e6 !important;
}

.left-content {
  height: calc(-116px + 100vh);
  display: flex;
  flex-direction: column;
  border-right: 1px solid #edeff0;

  .left-Title {
    border-bottom: 1px solid #edeff0;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    text-align: left;
    font-style: normal;
    height: 68px;
    box-sizing: border-box;
    padding: 33px 0 10px 34px;
  }

  .left-navs {
    flex: 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 27px 0 0 0;

    .left-navs-item {
      padding: 0 20px 0 34px;
      margin-bottom: 27px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }

    .left-navs-item-active {
      color: #28b28b;
    }

    .left-navs-item:hover {
      color: #28b28b;
    }
  }
}

.right-content {
  height: calc(-116px + 100vh);
  display: flex;
  flex-direction: column;

  ::v-deep .el-menu--horizontal > .el-menu-item.is-active {
    color: #11a983 !important;
  }

  ::v-deep .el-menu.el-menu--horizontal {
    padding-left: 32px;
  }

  ::v-deep.commonMenu .el-menu .el-menu-item {
  }

  ::v-deep.commonMenu.el-dropdown-menu__item,
  .el-menu-item {
    font-size: 16px !important;
    padding: 0 33px;
  }

  .right-content-main {
    flex: 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .inputLine {
    padding: 24px 15px 24px 19px;
  }
}
</style>
